<template>
  <el-select
    v-if="type === 'select'"
    :model-value="val"
    @update:modelValue="setVal"
    :="typeProps"
  >
    <el-option
      v-for="op in data as any[]"
      :key="op[id]"
      :value="op[id]"
      :label="op[label]"
    ></el-option>
  </el-select>
  <el-checkbox
    v-else-if="type === 'checkboxSignle'"
    :model-value="val"
    @update:modelValue="setVal"
    :="typeProps"
  />
  <el-date-picker
    v-else-if="type === 'dateTime'"
    :model-value="val"
    @update:modelValue="setVal"
    :="typeProps"
    style="width: 100%"
    type="datetime"
    format="YYYY/MM/DD HH:mm:ss"
    value-format="YYYY/MM/DD HH:mm:ss"
  />
  <span v-else-if="type === 'sequence'">{{ val }}</span>
  <el-input
    v-else
    :model-value="val"
    @update:modelValue="setVal"
    :="typeProps"
  ></el-input>
</template>
<script lang="ts" setup>
import { colComProps, colComEmits } from "./prop";
import { use } from "./use";
const emit = defineEmits(colComEmits);
const props = defineProps(colComProps);
defineOptions({
  name: "z-col-com",
});
const { val, setVal } = use(props, emit);
</script>
<style lang="scss">
.z-col-com {
  flex-basis: 0;
  flex-grow: 1;
}
</style>
